<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>监狱人员后台管理系统</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="res/css/bootstrap.min.css" rel="stylesheet">
		<link href="res/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="res/css/animate.css" rel="stylesheet">
		<link href="res/css/style.min.css" rel="stylesheet">
		<link href="res/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="row">
				<div class="col-lg-12">

					<div class="card">
						<div class="card-header">
							<h4>后台管理员</h4>
						</div>

						<div class="card-body">

							<div id="toolbar" class="toolbar-btn-action">
								<button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal"
									data-target="#exampleModal" data-whatever="@mdo">新增管理员</button>
								<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
									aria-labelledby="exampleModalLabel">
									<div class="modal-dialog" role="document">

										<div class="modal-content">

											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close"><span aria-hidden="true">&times;</span></button>
											</div>

											<!-- 新增 -->
											<div class="card-body">
												<form action="" method="post" onsubmit="return false;" name="PostForm"
													id="PostForm">
													<input type="text" hidden="hidden" id="submitType" value="add" />
													<input type="text" id="id" name="id" hidden="hidden">
													<div class="form-group">
														<label for="postcode">岗位编码</label>
														<input class="form-control" type="text" id="postcode"
															name="postcode" placeholder="请输入岗位编号..">
													</div>
													<div class="form-group">
														<label for="postname">岗位名称</label>
														<input class="form-control" type="text" id="postname"
															name="postname" placeholder="请输入岗位名称..">
													</div>
													<div class="form-group">
														<button class="btn btn-primary" type="submit"
															onclick="formSubmit()">确定</button>
													</div>
												</form>
											</div>

											<div class="modal-footer">
												<button type="button" class="btn btn-default"
													data-dismiss="modal">关闭</button>
											</div>

										</div>
									</div>
								</div>
							</div>



							<table id="tb_departments">

							</table>

						</div>
					</div>
				</div>



			</div>

		</div>

		<script type="text/javascript" src="res/js/jquery.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="res/js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

		<!--行内编辑插件-->
		<link href="res/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
		<script type="text/javascript" src="res/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js">
		</script>
		<script type="text/javascript" src="res/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js">
		</script>

		<script type="text/javascript" src="res/js/main.min.js"></script>
		<script type="text/javascript">
			$('#tb_departments').bootstrapTable({
				classes: 'table table-bordered table-hover table-striped',
				url: '/Final_ssm2/Post/Post_table',
				method: 'get',
				dataType: 'json',
				uniqueId: 'id',
				idField: 'id', // 每行的唯一标识字段
				toolbar: '#toolbar', // 工具按钮容器
				clickToSelect: true, // 是否启用点击选中行
				showColumns: true, // 是否显示所有的列
				showRefresh: true, // 是否显示刷新按钮
				contentType: "application/x-www-form-urlencoded",
				success: function(data) {
					console.log(data)
				},
				//showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

				pagination: true, // 是否显示分页
				sortOrder: "asc", // 排序方式
				queryParams: function(params) {
					var temp = {
						limit: params.limit, // 每页数据量
						offset: params.offset, // sql语句起始索引
						page: (params.offset / params.limit) + 1,
						sort: params.sort, // 排序的列名
						sortOrder: params.order // 排序方式'asc' 'desc'
					};
					return temp;
				}, // 传递参数
				sidePagination: "server", // 分页方式：client客户端分页，server服务端分页
				pageNumber: 1, // 初始化加载第一页，默认第一页
				pageSize: 2, // 每页的记录行数
				pageList: [10, 25, 50, 100], // 可供选择的每页的行数

				columns: [{
					checkbox: true // 是否显示复选框
				}, {
					field: 'id',
					title: 'ID',
					sortable: true // 是否排序
				}, {
					field: 'postcode',
					title: '岗位编码'
				}, {
					field: 'postname',
					title: '岗位名称',
				}, {
					field: 'operate',
					title: '操作',
					formatter: btnGroup, // 自定义方法
					events: {
						'click .edit-btn': function(event, value, row, index) {
							editUser(row.id);
						},
						'click .del-btn': function(event, value, row, index) {
							delUser(row.id);
						},
						'click .show-btn': function(event, value, row, index) {
							showUser(row.id);
						}
					}
				}],

				onLoadSuccess: function(data) {
					$("[data-toggle='tooltip']").tooltip();
				}
			});
			// 操作按钮
			function btnGroup() {
				let html =
					'<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
					'<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
					'<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
				return html;
			}

			// 操作方法 - 编辑
			function editUser(id) {
				$('#id').val(id);
				$('#submitType').attr('value','edit');
				$('#exampleModal').modal('show');
				$.ajax({
					url: '/Final_ssm2/Post/getDetail?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							$('#postcode').val(res.data.postcode);
							$('#postname').val(res.data.postname);
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}
			// 操作方法 - 删除
			function delUser(id) {
				$.ajax({
					url: '/Final_ssm2/Post/delete?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							alert('删除成功！');
							$('#tb_departments').bootstrapTable('refresh');
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}
			// 操作方法 - 查看
			function showUser(id) {
				$('#submitType').val('look');
				$('#exampleModal').modal('show');
				$.ajax({
					url: '/Final_ssm2/Post/getDetail?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							$('#id').val(id);
							$('#postcode').val(res.data.postcode);
							$('#postname').val(res.data.postname);
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}

			function add() {
				$.ajax({
					url: '/Final_ssm2/Post/add',
					dataType: 'json',
					type: 'get',
					data: {
						postcode: $('#postcode').val(),
						postname: $('#postname').val(),

					},
					success(res) {
						console.log(res);
						if (res.message === "success") {
							alert('添加成功！');
							$('#tb_departments').bootstrapTable('refresh');
							$('#postname').val('');
							$('#postcode').val('');

						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}

			function formSubmit() {
				//表单类型：1、添加 2、查看 3、修改
				var submitType = $('#submitType').val();
				if (submitType === "add") {
					$('#AdminForm').bootstrapTable("removeAll");
					add();
				} else if (submitType === "edit") {
					$.ajax({
						url: '/Final_ssm2/Post/edit',
						dataType: 'json',
						type: 'post',
						data: {
							id: $('#id').val(),
							postcode: $('#postcode').val(),
							postname: $('#postname').val()
						},
						success(res) {
							console.log(res);
							if (res.message === "success") {
								alert('修改成功！');
								$('#tb_departments').bootstrapTable('refresh');
								$('#id').val('');
								$('#postcode').val('');
								$('#postname').val('');
							} else if ((res.message === "error")) {
								alert('查看失败！');
							} else if ((res.message === "error_permission")) {
								alert('无权限！');
							} else {
								alert('未知错误！');
							}
						},
						error() {
							alert('系统错误');
						}
					})
				} else if (submitType === "look") {
					$('#exampleModal').modal('hide');
				}
			}

			//窗口关闭事件监听
			$("#exampleModal").on("hide.bs.modal", function(e) {
				$('#submitType').attr('value','add');
				if ($(e.target).attr("id") === "hiredate") {
					return
				}
				console.log("------");
				$("#postcode").val("");
				$("#postname").val("");
			});
		</script>

	</body>
</html>
